<template>
  <div class="mod-menu">
    <div>
      <el-radio-group v-model="radioTab" @change="tab">
        <el-radio-button label="1">代销中心</el-radio-button>
        <el-radio-button label="2">我的代销库</el-radio-button>
      </el-radio-group>
    </div>

    <div class="mt30" v-if="radioTab==1">
      <el-form :inline="true" :model="params">
        <el-form-item label="商品名称">
          <el-input v-model="params.title" placeholder="输入商品名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="search()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" v-loading="tableLoading" row-key="Id" border style="width: 100%; ">
        <el-table-column prop="title" align="center" label="商品名称">
        </el-table-column>
        <el-table-column prop="price" align="center" label="价格">
          <template slot-scope="scope">
            <span>{{scope.row.min_sale_price==scope.row.max_sale_price?scope.row.min_sale_price:scope.row.min_sale_price+'~'+scope.row.max_sale_price}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="result_sale_num" align="center" label="实际销量">
        </el-table-column>
        <el-table-column prop="sort" align="center" label="排序">
        </el-table-column>
        <el-table-column prop="verify_status" align="center" label="审核状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.verify_status==1">通过</el-tag>
            <el-tag type="warning" v-if="scope.row.verify_status==0">待审核</el-tag>
            <el-tag type="danger" v-if="scope.row.verify_status==2">不通过</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="上下架">
					<template slot-scope="scope">
						<el-tag :type="scope.row.added?'success':'danger'">
							{{scope.row.added?'上架':'下架'}}
						</el-tag>
					</template>
				</el-table-column> -->
        <el-table-column align="center" label="是否代销">
          <template slot-scope="scope">
            <el-tag effect="dark" :type="scope.row.proxy?'success':'warning'">
              {{scope.row.proxy?'已代销':'未代销'}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small" class="c-info" @click="watch(scope.row)">查看</el-button> -->
            <el-button type="text" size="small" @click="selling(scope.row)">{{scope.row.proxy?'取消代销':'代销'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="params.page" :page-sizes="[10, 20, 50, 100]" :page-size="params.limit" :total="listTotal" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>

    <div class="mt30" v-if="radioTab==2">
      <el-form :inline="true" :model="paramsMy">
        <el-form-item label="商品名称">
          <el-input v-model="paramsMy.title" placeholder="请输入商品名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="myList" v-loading="tableLoading" row-key="Id" border style="width: 100%; ">
        <el-table-column prop="title" align="center" label="商品名称">
        </el-table-column>
        <el-table-column prop="group_slim_list" align="center" label="商品类目">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.group_slim_list" :key="index">{{arrJoin(scope.row.group_slim_list)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" align="center" label="价格">
          <template slot-scope="scope">
            <span>{{scope.row.min_sale_price==scope.row.max_sale_price?scope.row.min_sale_price:scope.row.min_sale_price+'~'+scope.row.max_sale_price}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="result_sale_num" align="center" label="实际销量">
        </el-table-column>
        <el-table-column prop="sort" align="center" label="排序">
        </el-table-column>
        <el-table-column prop="verify_status" align="center" label="审核状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.verify_status==1">通过</el-tag>
            <el-tag type="warning" v-if="scope.row.verify_status==0">待审核</el-tag>
            <el-tag type="danger" v-if="scope.row.verify_status==2">不通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="added" align="center" label="上下架">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.added" :active-value="true" :inactive-value="false" active-color="#17B3A3" inactive-color="#B9B9B9" @change="switchChange(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small" class="c-info" @click="watch(scope.row)">查看</el-button> -->
            <el-button type="text" size="small" @click="goSetGrouping(scope.row)">设置分组</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeMy" @current-change="currentChangeMy" :current-page="paramsMy.page" :page-sizes="[10, 20, 50, 100]" :page-size="paramsMy.limit" :total="myListTotal" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <!-- 设置组 -->
    <set-grouping v-if="setGrouping" ref="setGrouping" @result="groupResult"></set-grouping>
  </div>
</template>

<script>
import setGrouping from './set-grouping.vue'
import serviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      radioTab: '1',
      dataList: [],
      dataListLoading: false,
      addOrUpdateVisible: false,
      setGrouping: false, // 设置分组
      optionsGroup: [],
      params: {
        title: '',
        page: 1,
        limit: 10
      },
      listTotal: null,
      viewDialogVisible: false,
      info: {},
      currId: {},

      /** 我的代销 **/
      myList: [],
      paramsMy: {
        page: 1,
        limit: 10,
        title: ''
      },
      myListTotal: null

    }
  },
  components: {
    setGrouping
  },
  created () {
    this.loadGroup()// 获取分组数据
    this.loadList()
  },
  methods: {
    loadGroup () {
      serviceApi.getGoodsGroupsList().then(res => {
        console.log(res)
        if (res.data && res.data.code == 200) {
          this.optionsGroup = res.data.list
        }
      })
    },
    arrJoin (arr) {
      let newArr = []
      arr.forEach(item => {
        newArr.push(item.name)
      })
      return newArr.join(',')
    },
    /**
     * 分组change
     * */
    cascaderChange () {
      if (Array.isArray(this.params.group_id)) {
        this.params.group_id = this.params.group_id[this.params.group_id.length - 1]
      }
    },

    // 代销中心列表
    loadList () {
      this.tableLoading = true
      serviceApi.shopSellList(this.params).then(res => {
        if (res.data && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.listTotal = res.data.page.totalCount
        }
        this.tableLoading = false
      })
    },

    sizeChange (e) {
      this.params.page = 1
      this.params.limit = e
      this.loadList()
    },
    currentChange (e) {
      this.params.page = e
      this.loadList()
    },

    selectChange (key) {
      if (this.params[key] !== 0 && !this.params[key]) {
        this.params[key] = null
      }
    },

    search () {
      this.params.page = 1
      this.loadList()
    },
    // 设置代销
    selling (row) {
      let msg = ''
      if (row.proxy) {
        msg = `是否取消商品 [ ${row.title} ]的代销？`
      } else {
        msg = `是否代销商品 [ ${row.title} ]？`
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.proxy) {
          // 取消代销
          serviceApi.shopCancelSell(row.id).then(res => {
            if (res.data && res.data.code == 200) {
              this.$message.success('操作成功')
              this.loadList()
            } else {
              this.$message.warning(res.data.msg || '发生错误')
            }
          })
        } else {
          // 代销
          serviceApi.shopCanSell(row.id).then(res => {
            if (res.data && res.data.code == 200) {
              this.$message.success('操作成功')
              this.loadList()
              // 开启分组
              this.goSetGrouping(row)
            } else {
              this.$message.warning(res.data.msg || '发生错误')
            }
          })
        }
      }).catch(() => { })
    },
    // 查看
    watch (row) {
      // this.goSetGrouping(row.id);
    },

    // 新增 / 修改
    goShareBenefit (id) {
      this.setShareBenefit = true
      this.$nextTick(() => {
        this.$refs.setGrouping.init(id)
      })
    },
    // 选择
    tab () {
      if (this.radioTab == 1) {
        this.loadList()
      } else {
        this.loadMyList()
      }
    },
    // 去设置分组
    goSetGrouping (row) {
      this.currId = row.id
      this.setGrouping = true
      this.$nextTick(() => {
        this.$refs.setGrouping.init(this.optionsGroup, row)
      })
    },
    // 分组返回值
    groupResult (e) {
      if (e) {
        let params = {
          goods_id: this.currId,
          goods_group_ids: e
        }
        serviceApi.goodsSetGroups(params).then(res => {
          if (res.data && res.data.code == 200) {
            this.$message.success('设置成功！')
            this.loadList()
          }
        })
      }
      this.setGrouping = false
    },

    /** *  -----------我的代销库-----------  **/
    loadMyList () {
      this.tableLoading = true
      serviceApi.mySellingGoods(this.paramsMy).then(res => {
        if (res.data && res.data.code == 200) {
          this.myList = res.data.page.list
          this.myListTotal = res.data.page.totalCount
        }
        this.tableLoading = false
      })
    },

    sizeChangeMy (e) {
      this.paramsMy.page = 1
      this.paramsMy.limit = e
      this.loadMyList()
    },
    currentChangeMy (e) {
      this.paramsMy.page = e
      this.loadMyList()
    },
    switchChange (row) {
      let msg = ''
      let param = {
        goods_id: row.id,
        added: row.added
      }
      if (row.added) {
        msg = '已上架'
      } else {
        msg = '已下架'
      }
      serviceApi.goodsPutAway(param).then(res => {
        if (res.data && res.data.code == 200) {
          this.$message.success(msg)
        } else {
          row.added = !row.added
        }
      })
    }

  }
}
</script>
<style>
.mt30 {
  margin-top: 30px;
}
</style>
